<template>
  <view class="bigbox">
    <view class="title">
      潮流玩家
    </view>
    <!-- 对方说话 -->
    <view class="hang" v-for="(item,index) in userInfo" :key="index">
      <view class="tou"> 
        <view class="tou_img_bar">
          <image :src="item.url" mode="" class="tou_img"></image>
        </view>
      </view>
      <view class="mess">
        {{item.mess}}
      </view>
    </view>
    <!-- 自己回话 -->
    <view class="hangTwo" v-for="(item,index) in myInfo" :key="index">
      <view class="tou"> 
        <view class="tou_img_bar"> 
          <image :src="item.url" mode="" class="tou_img"></image>
        </view>
      </view>
      <view class="messTwo">
        {{item.mess}}
      </view>
    </view>
    <!-- 输入框 -->
      <view class="footer">
           <input name="userName" placeholder=" "/>  
          <button size="mini">发送</button>
      </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
            userInfo: [
              {
                url:'/static/image_one/头像 女孩 (1).png',
                mess:'我给你将这个东西好好耍'
              },
              {
                url:'/static/image_one/头像 女孩 (1).png',
                mess:'但是好贵哟'
              },
              {
                url:'/static/image_one/头像 女孩 (1).png',
                mess:'希望有优惠'
              },
            ],
            myInfo:[
              {
                url:'/static/image_one/zz.jpg',
                mess:'真的吗？'
              },
              {
                url:'/static/image_one/zz.jpg',
                mess:'我想试试'
              },
            ]
      };
    }
  }
</script>

<style lang="less">
.bigbox {
  height: 1350rpx;
  background-color: #253143;
}
.title {
  text-align: center;
  font-size: 38rpx;
  font-weight: 600;
  padding: 20rpx;
  color: #fff;
}
.hang {
  height: 130rpx;
  width: 96%;
  margin: 20rpx auto;
  border-radius: 20rpx;
  /* background-color: #a1b1c7; */
}
.hang .tou {
  width: 20%;
  margin-top: 20rpx;
  float: left;
}
.hang .tou .tou_img_bar {
  width: 100rpx;
  height: 100rpx;
  margin: 0 auto;
  border-radius: 150rpx;
  overflow: hidden;

}
.hang .tou .tou_img_bar .tou_img {
  width: 100%;
  height: 100%;
}
.mess {
  background-color: rgb(245, 245, 245);
  float: left;
  height: 80rpx;
  /* width: ; */
  line-height: 80rpx;
  margin-top: 30rpx;
  padding: 0rpx 20rpx;
  border-radius: 20rpx;
}

/* 222 */
.hangTwo {
  height: 130rpx;
  width: 96%;
  margin: 20rpx auto;
  border-radius: 20rpx;
  /* background-color: #a1b1c7; */
}
.hangTwo .tou {
  width: 20%;
  margin-top: 20rpx;
  float: right;
}
.hangTwo .tou .tou_img_bar {
  width: 100rpx;
  height: 100rpx;
  margin: 0 auto;
  border-radius: 150rpx;
  overflow: hidden;

}
.hangTwo .tou .tou_img_bar .tou_img {
  width: 100%;
  height: 100%;
}
.messTwo {
  background-color: rgb(4, 105, 149);
  color: #fff;
  float: right;
  height: 80rpx;
  /* width: ; */
  line-height: 80rpx;
  margin-top: 30rpx;
  padding: 0rpx 20rpx;
  border-radius: 20rpx;
}
.footer {
  position: fixed;
  bottom: 10rpx;
  left: 0rpx;
  width: 100%;
  height: 120rpx;
  /* line-height: 100rpx; */
  background-color: rgb(17, 71, 121);
}
.footer input {
  width: 70%;
  height: 60rpx;
  margin: 30rpx;
  padding-left: 10rpx;
  float: left;
  border-radius: 20rpx;
  // border: 1rpx solid #000;
  background-color: #fff;
}
.footer button {
  /* width: 70%; */
  float: left;
  margin: 30rpx 0;
  background-color: rgb(36, 141, 239);
  color: #fff;
}

</style>
